<template>
    <div class="feature-detail show">
        <div class="content">
            <header>
                <div class="feature-close" @click="closeModal"><i class="ri-close-line"></i></div>
                <div class="title">{{$t('price_features_header')}}</div>
                <table>
                    <tbody>
                    <tr>
                        <th>{{$t('price_features_title')}}</th>
                        <th class="game"><img :src="vipGamePath"> <span>{{$t('price_features_title_li_1')}}</span></th>
                        <th><img :src="vipPath"> <span>{{$t('price_features_title_li_2')}}</span></th>
                        <th>{{$t('price_features_title_li_3')}}</th>
                    </tr>
                    <tr class="tr-tips">
                        <td></td>
                        <td class="ic-support">{{$t('price_game_desc')}}</td>
                        <td class="ic-support"></td>
                        <td class="ic-support"></td>
                    </tr>
                    <tr>
                        <td>{{$t('price_features_network')}}</td>
                        <td class="ic-support"><i class="ri-check-fill"></i></td>
                        <td class="ic-support"><i class="ri-check-fill"></i></td>
                        <td class="ic-support"><i class="ri-check-fill"></i></td>
                    </tr>
                    <tr>
                        <td>{{$t('price_features_all_platforms')}}</td>
                        <td class="ic-support"><i class="ri-check-fill"></i></td>
                        <td class="ic-support"><i class="ri-check-fill"></i></td>
                        <td class="ic-support"><i class="ri-check-fill"></i></td>
                    </tr>
                    <tr>
                        <td>{{$t('price_features_boost_streaming')}}</td>
                        <td class="ic-support"><i class="ri-check-fill"></i></td>
                        <td class="ic-support"><i class="ri-check-fill"></i></td>
                        <td class="ic-support"><i class="ri-check-fill"></i></td>
                    </tr>
                    <tr>
                        <td>{{$t('price_features_scenes')}}</td>
                        <td class="ic-support"><i class="ri-check-fill"></i></td>
                        <td class="ic-support"><i class="ri-check-fill"></i></td>
                        <td class="ic-support"><i class="ri-close-fill"></i></td>
                    </tr>
                    <tr>
                        <td>{{$t('price_features_game_accelerator')}}</td>
                        <td class="ic-support"><i class="ri-check-fill"></i></td>
                        <td class="ic-support"><i class="ri-close-fill"></i></td>
                        <td class="ic-support"><i class="ri-close-fill"></i></td>
                    </tr>
                    <tr>
                        <td>{{$t('price_features_network')}}</td>
                        <td class="ic-support">{{$t('price_features_network_game')}}</td>
                        <td class="ic-support">{{$t('price_features_network_high')}}</td>
                        <td class="ic-support">{{$t('price_features_network_limited')}}</td>
                    </tr>
                    <tr>
                        <td>{{$t('price_features_bandwidth')}}</td>
                        <td class="ic-support">{{$t('price_features_bandwidth_high')}}</td>
                        <td class="ic-support">{{$t('price_features_bandwidth_quality')}}</td>
                        <td class="ic-support">{{$t('price_features_bandwidth_normal_quality')}}</td>
                    </tr>
                    <tr>
                        <td>{{$t('price_features_online_support')}}</td>
                        <td class="ic-support">{{$t('price_features_support_high')}}</td>
                        <td class="ic-support">{{$t('price_features_bandwidth_priority')}}</td>
                        <td class="ic-support">{{$t('price_features_bandwidth_hours')}}</td>
                    </tr>
                    <tr>
                        <td>{{$t('price_features_multiple')}}</td>
                        <td class="ic-support">3</td>
                        <td class="ic-support">3</td>
                        <td class="ic-support">1</td>
                    </tr>
                    </tbody>
                </table>
                <div class="tips">{{$t('price_features_desc')}}</div>
            </header>
        </div>
    </div>
</template>

<script>
export default {
    name: "FeatureDetail",
    data () {
        return {
            vipGamePath: require('@/assets/vip_game.b0048.svg'),
            vipPath: require('@/assets/vip.2e8d3.svg')
        }
    },
    methods: {
        closeModal () {
            this.$emit('closeModal')
        }
    }
}
</script>

<style scoped lang="scss">
    .feature-detail {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0,0,0,.7);
        z-index: 999999999999;
        .content {
            background: #fff;
            border-radius: 6px;
            padding: 32px;
            width: 600px;
            position: relative;
            .title {
                font-size: 24px;
            }
            header {
                background: none;
                .feature-close {
                    position: absolute;
                    right: 10px;
                    top: 8px;
                    cursor: pointer;
                    i {
                        font-size: 20px;
                        color: #7b7b7b;
                        transition: all .2s ease;
                    }
                }
                table {
                    margin-top: 32px;
                    width: 100%;
                    background: #fff;
                    border-radius: 4px;
                    border-collapse: collapse;
                }
                .tips {
                    margin-top: 24px;
                    font-size: 14px;
                    padding: 6px;
                    color: #FF5569;
                    border-radius: 4px;
                    display: block;
                    font-weight: 500;
                }
            }
            th {
                text-align: center;
                box-shadow: inset 0 -2px 0 #ff960c;
                font-size: 14px;
                font-weight: 500;
                border-top: 1px solid #f0effd;
                height: 50px;
                vertical-align: center;
                img {
                    width: 18px;
                    display: inline-block;
                }
                span {
                    vertical-align: top;
                }
            }
            .game {
                background: #fff6e9!important;
            }
            .ic-support {
                height: 30px;
                font-weight: 500;
                text-align: center;
                font-size: 13px;
                color: #333;
                box-shadow: inset 0 -1px 0 #f0f1ff;
            }
            td:nth-child(2) {
                box-shadow: inset 0 -1px 0 #f0f1ff;
                background: #fff6e9;
            }
            td {
                text-align: center;
                font-size: 13px;
                color: #333;
                height: 40px;
                .ri-check-fill {
                    color: #07bb07;
                    font-size: 18px;
                }
                .ri-close-fill {
                    font-size: 18px;
                    color: #ff5569;
                }
            }
        }
    }
</style>
